import React from 'react';

const FunctionButton = ({ icon, label, onClick }) => (
  <button
    onClick={onClick}
    className="flex flex-col items-center justify-center w-20 h-20 space-y-2 rounded-lg hover:bg-gray-50 border border-gray-200"
  >
    <div className="w-10 h-10 flex items-center justify-center text-blue-500 bg-blue-50 rounded-lg">
      {icon}
    </div>
    <span className="text-xs text-gray-600">{label}</span>
  </button>
);

const FunctionButtons = () => {
  const handlePreviewMode = () => {
    console.log('预览模式');
  };

  const handleImageGeneration = () => {
    console.log('图像生成');
  };

  const handleVideoGeneration = () => {
    console.log('视频生成');
  };

  const handleMore = () => {
    console.log('更多功能');
  };

  return (
    <div className="flex justify-center space-x-4 py-4">
      <FunctionButton
        icon={<span className="text-xl" role="img" aria-label="预览">🔍</span>}
        label="预览模式"
        onClick={handlePreviewMode}
      />

      <FunctionButton
        icon={<span className="text-xl" role="img" aria-label="图像">🖼️</span>}
        label="图像生成"
        onClick={handleImageGeneration}
      />

      <FunctionButton
        icon={<span className="text-xl" role="img" aria-label="视频">🎬</span>}
        label="视频生成"
        onClick={handleVideoGeneration}
      />

      <FunctionButton
        icon={<span className="text-xl" role="img" aria-label="更多">⋯</span>}
        label="更多"
        onClick={handleMore}
      />
    </div>
  );
};

export default FunctionButtons;